<template>
  <div class="app-container">
    <el-form ref="formSearch" :rules="rules" :model="params" label-width="100px">
      <el-row>
        <el-col :span="19">
          <el-row class="form_table">
            <el-col :span="6">
              <el-form-item prop="dictionaryName" :label="$t('parameter.dictionaryName')">
                <el-input v-model.trim="params.settingName" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="dictionaryDescription" :label="$t('parameter.dictionaryDescription')">
                <el-input v-model.trim="params.settingLabel" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5" style="text-align: center">
          <el-button type="primary" @click="search('formSearch')">{{ $t('btn.query') }}</el-button>
          <el-button type="danger" @click="reset('formSearch')">{{ $t('btn.reset') }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-button v-permission="'gaeaSettingController#insert'" type="primary" icon="el-icon-plus" @click="handleClickAddOrEdit(null)">{{ $t('btn.add') }}</el-button>
    <el-button v-permission="'gaeaSettingController#update'" type="primary" :disabled="selectedList.length != 1" icon="el-icon-edit" @click="handleClickAddOrEdit(selectedList[0], null)">{{ $t('btn.edit') }}</el-button>
    <!-- 查询结果列表 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column fixed type="selection" width="50" center />
      <el-table-column type="expand">
        <template slot-scope="props">
          <p class="table-expand-item">
            <span class="titel">参数值: </span>
            <span>{{ props.row.settingValue }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.index')" width="65" type="index">
        <!-- <template slot-scope="scope">
          {{ params.pageSize * (params.pageNumber - 1) + scope.$index + 1 }}
        </template> -->
      </el-table-column>
      <el-table-column :label="$t('parameter.dictionaryName')" min-width="180" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.settingName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('parameter.dictionaryDescription')" min-width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.settingLabel }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('businessGlossary.enabled')" width="90" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.enable == 1 ? $t('businessGlossary.enabled1') : $t('businessGlossary.enabled0')" placement="top">
            <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc" :active-value="1" :inactive-value="0" @change="switchEnableById(scope.row)" />
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="$t('businessGlossary.remark')" min-width="210" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.createBy')" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.createBy }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.createTime')" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.updateBy')" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.updateBy }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.updateTime')" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.updateTime }}
        </template>
      </el-table-column>
      <!-- <el-table-column v-permission="'gaeaSettingController#update'" fixed="right" label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button :circle="true" :plain="true" type="primary" icon="el-icon-edit" size="mini" @click="handleClickAddOrEdit(scope.row, null)" />
          </el-tooltip>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="block">
      <el-pagination background :total="totalCount" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" :current-page="params.pageNumber" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { settingPageList, authSettingEdit } from '@/api/system-set'
export default {
  name: 'Parameter',
  data() {
    return {
      selectedList: [],
      clickType: '',
      formData: {},
      // 弹框默认隐藏
      dialogFormVisible: false,
      rules: {
        settingName: [
          { required: false, message: this.$t('table.pleaseFillIn'), trigger: 'blur' },
          { min: 3, max: 5, message: this.$t('table.lengthIn3Or5'), trigger: 'blur' },
        ],
        settingLabel: [
          { required: false, message: this.$t('table.pleaseFillIn'), trigger: 'blur' },
          { min: 3, max: 5, message: this.$t('table.lengthIn3Or5'), trigger: 'blur' },
        ],
      },
      selectInput: {
        keyname: 'settingName',
      },
      params: {
        pageNumber: 1,
        pageSize: 10,
        settingName: '',
        settingLabel: '',
      },
      list: null,
      totalCount: 0,
      totalPage: 0,
      listLoading: true,
    }
  },
  watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.formData = {}
        this.$refs.dlg.$refs.form.resetFields()
      }
    },
  },
  created() {
    this.queryByPage()
  },
  methods: {
    async queryByPage() {
      const res = await settingPageList(this.params)
      if (res.code != '200') return
      this.list = res.data.records
      this.totalCount = res.data.total
      this.totalPage = res.data.pages
      this.listLoading = false
    },
    cancel() {
      this.dialogFormVisible = false
    },
    addOrEdit(id, val = '') {
      this.$router.push({ path: '/system/setting/edit', query: { id: id, val: val }})
      // this.clickType = 'add'
      // this.dialogFormVisible = true
      // this.formData = {
      //   settingName: '',
      //   settingLabel: '',
      //   settingType: '',
      //   settingValue: '',
      //   settingForm: '',
      //   remark: '',
      // }
    },
    // 查询
    search(formName) {
      this.params.pageNumber = 1
      this.queryByPage()
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     console.log('submit!')

      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    // 重置
    reset(formName) {
      this.$refs[formName].resetFields()
      this.params.settingName = ''
      this.params.settingLabel = ''
      this.queryByPage()
    },
    // 启用禁用切换
    async switchEnableById(val) {
      const res = await authSettingEdit({
        id: val.id,
        enable: val.enable,
        accessKey: val.accessKey,
      })
      if (res.code !== '200') {
        this.queryByPage()
      }
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.queryByPage()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.queryByPage()
    },
    // 选择项改变时
    handleSelectionChange(val) {
      this.selectedList = val
    },
    handleClickAddOrEdit(row, val = '') {
      let id = null
      let accessKey = null
      const url = row ? 'edit' : 'add'
      if (row != null) {
        id = row.id
        accessKey = row.accessKey
      }
      this.$router.push({ path: `/system-set/parameter/${url}`, query: { id: id, val: val, accessKey: accessKey }})
    },

    // handleClickDelete(id) {
    //   this.$confirm('此操作将永久删除, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$message({
    //       type: 'success',
    //       message: '删除成功!'
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     })
    //   })
    // }
  },
}
</script>
